<template>
  <div class="wrap">
    <div class="item">
      <i class="el-icon-close" @click="toPage('')"></i>
    </div>
    <div class="item" v-if="!isLogin">
      <p @click="toPage('sinUp','')"> {{$t('navmenu.login')}} </p>
    </div>
    <div class="item" v-if="!isLogin">
      <p @click="toPage('login','')">{{$t('navmenu.signup')}}</p>
    </div>
    <div class="item" v-if="isLogin">
      <p @click="toPage('','loginOut')">{{$t('navmenu.logout')}}</p>
    </div>
    <div class="item" v-if="isLogin">
      <p @click="toPage('person','')">{{$t('navmenu.selfcenter')}}</p>
    </div>
    <div class="cut"></div>
    <div class="item">
      <p @click="toPage('','index')">{{$t('navmenu.homepage')}}</p>
    </div>
    <div class="item">
      <p @click="toPage('introduce','')">{{$t('navmenu.introduce')}}</p>
    </div>
    <div class="item">
      <p @click="toPage('contact','')">{{$t('navmenu.contact')}}</p>
    </div>
    <div class="cut"></div>
    <div class="item">
      <el-select v-model="section" placeholder="请选择分类" style="width: 260px" :popper-append-to-body="false">
        <el-option
          v-for="item in sectionOptions"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </div>
    <div class="item">
      <el-input v-model="searchInput" placeholder="请输入关键词" style="width: 260px"></el-input>
    </div>
    <div class="item">
      <p @click="toPage('','search')">{{$t('navmenu.search')}}</p>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { dispatchEventStroage } from '../utils/tools'
import emitter from '../utils/eventbus';
import { getSection } from '../http/api'
export default {
  emits:['toClose'],
  data() {
    return {
      searchInput: '',
      isLogin: false ,
      sectionOptions: [],
      section: ''
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    toPage(page, action) {
      this.$emit("toClose");
      if(page) {
        this.$router.push({
          path: '/' + page,
          query: ''
        })
        window.scroll(0, 0);
      }else {
        if(action === 'loginOut') {
          this.removeLocalStorage();
        }else if(action === 'search') {
          this.$router.push({
            path: '/index'
          })
          emitter.emit("toSearch",{ query: this.searchInput, section: this.section })
          localStorage.setItem("query", this.searchInput);
          if(this.section == '全部') {
            localStorage.setItem("section", "");
          }else {
            localStorage.setItem("section", this.section);
          }
          window.scroll(0, 0);
        }else if(action == 'index') {
          this.$router.push({
            path: '/index'
          }) 
          window.scroll(0, 0);
        }
        
      }
    },
    removeLocalStorage() {
      localStorage.setItem("name", '');
      localStorage.setItem("email", '');
      // localStorage.setItem("token", '');
      localStorage.setItem("isLogin", false);
      const isRemember = JSON.parse(localStorage.getItem("remember"));
      if(!isRemember) {
        localStorage.setItem("username", '');
        localStorage.setItem("password", '');
      }
      this.$router.push({
        path: '/index'
      });
      Message.success("登出成功")
    },
    init() {
      this.getListSection();
      this.query = "";
      this.isLogin = JSON.parse(localStorage.getItem("isLogin"));
      dispatchEventStroage();
      const that = this;
      window.addEventListener('setItemEvent', function (e) {
        if(e.key && e.key == 'isLogin'){
          that.isLogin = e.newValue
        }
      });
    },
    getListSection() {
      getSection().then(res => {
        if(res && res.data && res.data && res.data.code == 20000) {
          const { data } = res.data;
          let list = [];
          list.push("全部");
          data.forEach(item => {
            list.push(item.section);
          });
          this.sectionOptions = list;
          this.section = "全部";
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.wrap {
  height: 100%;
  padding: 20px 40px;
  margin: 0;
  background-color: #f2f2f2;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .item {
    margin-bottom: 10px;
    p {
      cursor: pointer;
    }
    p:hover {
      text-decoration: underline;
    }

  //修改的el-input的样式 
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner{
    background-color:#fff ;
    color:#999;
    border:0px;
    border-radius:0px;
    text-align: left;
  }

  //el-input聚焦的时候 外层的border会有一个样式
  /deep/ .el-select .el-input.is-focus .el-input__inner{
    border: 1px solid #999;
  }

  /deep/ .el-input.is-focus .el-input__inner{
    border: 1px solid #999 ;
  }

  //修改的是el-input上下的小图标的颜色
  /deep/ .el-select .el-input .el-select__caret{
    color:#999;
  }

  //修改总体选项的样式 最外层
  /deep/ .el-select-dropdown{
    background-color: #fff;
    margin-top: 10px;
    border:2px;
    border-radius: 0px;
  }

  //修改单个的选项的样式
  /deep/ .el-select-dropdown__item{
    background-color: transparent;
    color:#666;
  }

  //item选项的hover样式
  /deep/ .el-select-dropdown__item.hover, 
  /deep/ .el-select-dropdown__item:hover{
    color: #000;
  }

  //修改的是下拉框选项内容上方的尖角
  /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
    display: none;
  }
  }
  
  .item:last-child {
    display: flex;
    align-items: center;
    p {
      background: #4d4d4d;
      font-size: 18px;
      padding: 0px 20px;
      color: #FFF;
      border: 0 none;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
    }
    p:hover {
      text-decoration: none;
      background-color: rgb(216, 214, 214);
      color: #333;
    }
  }
  .item:first-child {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    i {
      font-size: 28px;
      cursor: pointer;
    }
  }
  
  .cut {
    height: 1px;
    width: 100%;
    background-color: #b3b3b3;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

</style>